.textbox {
  position: relative;
  z-index: var(--z-index-1);
}

.textbox:focus-within {
  z-index: var(--z-index-2); /* Stack `.textbox` over its sibling elements */
}

.disabled,
.disabled * {
  cursor: not-allowed;
}

.input {
  display: block;
  width: 100%;
  height: var(--space-24);
  padding: var(--space-0) calc(var(--space-8) - var(--border-width-1));
  border: var(--border-width-1) solid transparent;
  border-radius: var(--border-radius-4);
  background-color: var(--figma-color-bg-secondary);
  color: var(--figma-color-text);
}
.input:hover {
  border-color: var(--figma-color-border);
}
.input:focus {
  border-color: var(--figma-color-border-selected);
}
.disabled .input {
  border-color: var(--figma-color-border-disabled);
  background-color: transparent;
  color: var(--figma-color-text-disabled);
}
.hasIcon .input {
  padding-left: calc(var(--space-24) - var(--border-width-1));
}

.input::placeholder {
  color: var(--figma-color-text-tertiary);
}

.icon {
  position: absolute;
  top: 50%;
  left: var(--space-12);
  color: var(--figma-color-icon-secondary);
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -50%);
}
.disabled .icon {
  color: var(--figma-color-icon-disabled);
}

.icon svg {
  fill: currentColor;
}
